<template>
  <view class="login-container">
    <!-- 标题区域：居中显示，增加层级与间距 -->
    <view class="title-wrap">
      <text class="main-title">欢迎登录</text>
      <text class="sub-title">使用手机验证码快速登录</text>
    </view>

    <!-- 输入框区域：统一宽度与间距 -->
    <view class="form-group">
      <!-- 手机号输入 -->
      <view class="input-item">
        <image src="/static/icons/phone.png" class="input-icon" mode="widthFix" />
        <input
            v-model="phone"
            type="number"
            placeholder="请输入手机号"
            @input="validatePhone"
        />
      </view>
      <!-- 手机号错误提示 -->
      <text class="error-tip" v-if="!isPhoneValid && showPhoneError">手机号格式错误</text>

      <!-- 验证码输入 + 获取按钮 -->
      <view class="input-item">
        <image src="/static/icons/verify.png" class="input-icon" mode="widthFix" />
        <input
            v-model="code"
            type="number"
            placeholder="请输入验证码"
        />
        <button
            class="get-code-btn"
            :class="{ 'countdown': isSendingCode }"
            @click="sendVerifyCode"
            :disabled="!isPhoneValid || isSendingCode"
        >
          {{ isSendingCode ? `${countdown}秒后重发` : '获取验证码' }}
        </button>
      </view>
    </view>

    <!-- 登录按钮：宽度与输入框统一，增强视觉一致性 -->
    <button class="login-btn" @click="login" :disabled="!isPhoneValid || !code">
      登录
    </button>
  </view>
</template>
<script setup>
import { ref, onUnmounted } from 'vue'; // 注意：改为 onUnmounted
import request from '@/utils/request.js'; // 引入全局请求工具

// 响应式数据
const phone = ref('');        // 手机号
const code = ref('');         // 验证码
const isPhoneValid = ref(false); // 手机号是否合法
const showPhoneError = ref(false); // 是否显示手机号错误提示
const isSendingCode = ref(false); // 是否正在发送验证码
const countdown = ref(60);    // 倒计时秒数
let countdownTimer = null;    // 倒计时定时器

/**
 * 校验手机号格式（正则：1开头的11位数字）
 */
const validatePhone = (e) => {
  const value = e.detail.value;
  const reg = /^1\d{10}$/;
  isPhoneValid.value = reg.test(value);
  // 输入时若格式错误，显示提示
  showPhoneError.value = !isPhoneValid.value && value.length > 0;
};

/**
 * 发送验证码（调用全局POST请求）
 */
const sendVerifyCode = async () => {
  if (!isPhoneValid.value) return;

  try {
    // 拼接 phone 到 URL 的查询参数中
    const url = `agent/user/auth/sendCode?phone=${phone.value}`;
    const res = await request.get(url); // 用 GET 请求传递查询参数

    // 【核心修改】判断业务状态码
    if (res.code === 200) {
      uni.showToast({ title: '验证码发送成功', icon: 'success' });
      isSendingCode.value = true;
      countdown.value = 60;
      countdownTimer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(countdownTimer);
          isSendingCode.value = false;
        }
      }, 1000);
    } else {
      // 业务错误，显示后端返回的错误信息
      uni.showToast({ title: res.msg || '发送验证码失败', icon: 'none' });
    }
  } catch (error) {
    console.error('发送验证码失败：', error);
    // catch 块只处理网络或系统级错误
    uni.showToast({ title: '网络异常，请稍后再试', icon: 'none' });
  }
};

/**
 * 登录逻辑（调用全局POST请求）
 */
const login = async () => {
  if (!isPhoneValid.value) {
    showPhoneError.value = true;
    return;
  }
  if (!code.value) {
    uni.showToast({ title: '请输入验证码', icon: 'none' });
    return;
  }

  try {
    // 调用后端接口：agent/user/auth/login/phone
    const res = await request.post('agent/user/auth/login/phone', {
      phone: phone.value,
      code: code.value
    });

    // 【核心修改】判断业务状态码
    if (res.code === 200) {
      // 登录成功：从 res.data 中获取 token
      const token = res.data;
      uni.setStorageSync('token', token);
      uni.showToast({ title: '登录成功', icon: 'success' });
      console.log("登录成功，准备跳转到新页面")
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/home/index' });
      }, 1000);
    } else {
      // 业务错误，例如验证码错误、手机号不存在等
      uni.showToast({ title: res.msg || '登录失败', icon: 'none' });
    }
  } catch (error) {
    console.error('登录失败：', error);
    // catch 块只处理网络或系统级错误
    uni.showToast({ title: '网络异常，请稍后再试', icon: 'none' });
  }
};

/**
 * 页面卸载时清理定时器（修复了之前的写法）
 */
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});
</script>

<style scoped>
/* ... 样式部分保持不变 ... */
/* 容器：垂直+水平居中，使用指定背景图 */
.login-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  background-image: url('/static/images/login-back.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 标题区域：层级区分 + 间距优化 */
.title-wrap {
  text-align: center;
  margin-bottom: 40px;
}
.main-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}
.sub-title {
  font-size: 14px;
  color: #666;
}

/* 输入框组：统一宽度 + 内部间距 */
.form-group {
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
}

/* 输入项：圆角 + 阴影，增强质感 */
.input-item {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 22.5px;
  padding: 0 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 输入框图标：尺寸统一 */
.input-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* 输入框：占满剩余空间 */
input {
  flex: 1;
  height: 100%;
  font-size: 16px;
}

/* 错误提示：醒目颜色 + 独立成行 */
.error-tip {
  font-size: 12px;
  color: #ff4d4f;
  margin-left: 10px;
  margin-bottom: 5px;
  display: block;
}

/* 获取验证码按钮：正常/倒计时状态区分 + hover效果 */
.get-code-btn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #67c23a;
  color: #fff;
  font-size: 14px;
  border-radius: 15px;
  margin-left: 10px;
  transition: background-color 0.3s;
}
.get-code-btn.countdown {
  background-color: #ccc;
  cursor: not-allowed;
}
.get-code-btn:not(.countdown):hover {
  background-color: #52a42c;
}

/* 登录按钮：突出显示 + hover/禁用状态优化 */
.login-btn {
  width: 100%;
  max-width: 400px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #67c23a; /* 启用时为鲜明绿色 */
  color: #fff;
  font-size: 18px;
  border-radius: 22.5px;
  transition: background-color 0.3s, box-shadow 0.3s; /* 阴影+背景色过渡 */
  box-shadow: 0 3px 8px rgba(103, 194, 58, 0.3); /* 增强立体感的阴影 */
  border: none; /* 去除默认边框 */
}
.login-btn:hover {
  background-color: #52a42c; /* hover时加深颜色 */
  box-shadow: 0 4px 10px rgba(82, 164, 44, 0.4); /* hover时阴影增强 */
}
.login-btn:disabled {
  background-color: #e0e0e0; /* 禁用时为浅灰色，区别于可点击状态 */
  color: #aaa;
  box-shadow: none; /* 禁用时去除阴影 */
  cursor: not-allowed; /* 鼠标样式改为“禁止” */
}
</style>